<template>
	<view class="" v-if="isLoad">
		<uni-nav-bar @clickLeft="$util.goUrl({ url: 1, openType: `navigateBack` })" :fixed="true" :shadow="false"
			:statusBar="true" :onlyLeft="true" :color="`#fff`" backgroundColor="none">
			<view slot="left">
				<view class="flex-center c-base radius" style="width:58rpx;height:58rpx;background:rgba(0,0,0,0.4)">
					<i class="iconfont icongengduo" style="font-size: 26rpx;transform: rotate(180deg);"></i>
				</view>
			</view>
		</uni-nav-bar>
		
		<view class="fill-base">
			<banner @change="goBanner" :list="detail.banner" :margin="0" :autoplay="true"
				:indicatorActiveColor="primaryColor" :height="562" :dotWidth="20" :dotBottom="5" :borderRadius="0"
				v-if="detail.banner.length > 0">
			</banner>
			<view class="pl-lg pr-lg">
				<view class="radius-16 fill-base flex-center pb-lg" style="padding-top: 40rpx">
					<image :src="detail.cover" mode="aspectFill" class="store-img radius-16"></image>
					<view class="flex-1 pl-md">
						<view class="flex-between pb-md">
							<text class="text-bold f-title ellipsis max-500">{{detail.name}}</text>
						</view>
						<view class="flex pt-md">
							<i class="iconfont iconjuli1" style="color: #5A5A5D;font-size: 13px;margin-right: 2px;margin-top: 4rpx;"></i>
							<text style="color: #5A5A5D;" class="f-caption ellipsis-2">{{detail.address + detail.info}}</text>
						</view>
					</view>
				</view>
				<view class="flex-warp pb-lg">
					<block v-for="(item,index) in detail.tag" :key="index">
						<view class="flex-center pl-lg pr-lg tag-item rel mr-md mb-sm mt-sm">
							<text class="f-caption" style="z-index: 1;" :style="{color: primaryColor }">{{item}}</text>
							<view class="tag-bg abs" :style="{backgroundColor: primaryColor}"></view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg">
			<view class="info-title f-mini-title text-bold pb-lg">场地介绍</view>
			<view class="pt-sm">
				<abnor v-if="!detail.intro"></abnor>
				<view v-else class="f-paragraph" style="white-space:pre-wrap">
					{{detail.intro}}
				</view>
			</view>
		</view>
		<view class="space-max-footer"></view>
		
		<fixed position="bottom">
			<view class="fill-base">
				<view class="flex-center bottom-btn">
					<view class="radius-16 info-btn flex-center mr-md" :style="{border: `1px solid ${primaryColor}`,color:primaryColor }" 
					@tap="$util.goUrl({url: detail.mobile ,openType: 'call'})">联系商家</view>
					<view class="radius-16 info-btn flex-center c-base f-paragraph" :style="{backgroundColor: primaryColor}" @tap.stop="toMap">一键导航</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</fixed>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default{
		data(){
			return{
				options:{},
				detail: {},
				isLoad: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		methods:{
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					// this.$jweixin.wxReady(() => {
					// 	this.$jweixin.hideOptionMenu()
					// })
					this.toAppShare()
				}
				// #endif
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.getInfo()
			},
			initRefresh(){
				this.$util.showLoading()
				this.getInfo()
			},
			async getInfo(){
				let data = await this.$api.business.getInfo({id: this.options.id})
				data.banner = data.banner.split(',')
				data.tag = data.tag.split(',')
				this.detail = data
				this.isLoad = true
				this.$util.hideAll()
			},
			goBanner(item) {
				let current = item.img
				let urls = this.detail.self_img.map(item => {
					return item.img
				})
				this.$util.previewImage({
					current,
					urls
				})
			},
			linkpress(res) {
				// #ifdef APP-PLUS
				if (/http/.test(res.href))
					this.$util.goUrl({
						url: res.href,
						openType: 'web'
					})
				// #endif
			},
			// 查看定位
			async toMap(index) {
				let {
					address,
					lat,
					lng
				} = this.detail
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				await uni.getLocation({
					type: 'gcj02',
				})
				await uni.openLocation({
					latitude: lat * 1,
					longitude: lng * 1,
					name: address,
					scale: 28
				})
			},
			toAppShare() {
				let {
					id: pid = 0
				} = this.userInfo
				
				let title = '门店详情'
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/business/pages/store/detail?pid=${pid}&id=${this.options.id}`
				let imageUrl = ''
				this.$jweixin.wxReady(() => {
					this.$jweixin.showOptionMenu()
					this.$jweixin.shareAppMessage(title, '', href, imageUrl)
					this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				})
			},
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
	}
</script>

<style lang="scss">
	.store-img{
		width: 135rpx;
		height: 135rpx;
	}
	.tag-item{
		height: 56rpx;
		border-radius: 56rpx;
		.tag-bg{
			opacity: 0.05;
			width: 100%;
			height: 100%;
			border-radius: 56rpx;
		}
	}
	.bottom-btn{
		height: 112rpx;
		.info-btn{
			width: 290rpx;
			height: 85rpx;
		}
	}
</style>